<template>
	<view>
		<Navbar></Navbar>
		<view class="u-form-box u-m-30">
			<u-form :model="form" label-width="200" ref="uForm">
				<u-form-item required label="姓名">
					<u-input placeholder="请输入真实姓名" input-align="right" :clearable="false" v-model="form.name" />
				</u-form-item>
				<u-form-item required label="公司名称">
					<view :class="form.company ? '' : 'u-color-gray'">
						<u-input :clearable="false" input-align="right" placeholder="请输入公司完整名称"
							v-model="form.company"></u-input>
					</view>
				</u-form-item>
				<u-form-item required label="职位">
					<u-input placeholder="请输入职位" v-model="form.position" :clearable="false" input-align="right" />
				</u-form-item>
				<u-form-item required label="规模">
					<u-input placeholder="请输入规模（人数或产值）" v-model="form.scale" :clearable="false" input-align="right" />
				</u-form-item>
				<u-form-item required="true" label="城市">
					<view class="u-text-right" :class="form.hometown ? '' : 'u-color-placeholder'" @click="onOpenHomeTown">
						{{ form.hometown || '请选择常驻城市 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="身份证号" prop="id_card">
					<u-input v-model="form.id_card" placeholder="请输入身份证号码" maxlength="18" input-align="right" :clearable="false" />
				</u-form-item>
				<u-form-item label="推荐人">
					<view class="u-text-right u-text-line-15 reference_name" :class="reference.name ? '' : 'u-color-gray'" @click="openReference">
						{{ reference.name || '请选择推荐人 >'}}
					</view>
				</u-form-item>
				<u-form-item required label="营业执照">
					<view class="u-flex u-row-right">
						<u-button type="warning" size="mini" :custom-style="btnStyle"
							@click="onUploadFile()">{{ form.business ? '重新上传' : '上传' }}</u-button>
					</view>
				</u-form-item>
				<view class="u-p-t-20 u-p-b-20 u-ellipsis" v-if="form.business">
					<view class="u-flex u-row-between u-ellipsis">
						<view class="u-flex-1 u-ellipsis u-m-r-20">
							{{ form.business }}
						</view>
						<u-icon name="close" size="30"
							@click="onDeleteUploadFile()"></u-icon>
					</view>
				</view>
			</u-form>
		</view>
		<view style="height: 200rpx;"></view>
		<Bottom :isTwice="true" :isClick="isClick" :rightText="btnText" @confirm="confirm"></Bottom>
		
		<!-- 城市 -->
		<UniAddressSelector v-if="addressShow" :selectAreaLevelLimit="2" :isSZ="0" @cancel="onCloseHomeTown"
			@confirm="onConfirmArea"></UniAddressSelector>
		
		<!-- 区号 -->
		<view v-if="codeShow">
			<u-select v-model="codeShow" @confirm="onCodeConfirm" :default-value="[0]" :mask-close-able="false"
				value-name="area_code" :list="codeList"></u-select>
		</view>
		
		<!-- 推荐人 -->
		<u-popup v-model="reference.show" mode="bottom" border-radius="20">
			<view class="checkAddressBox">
				<u-search v-model="reference.keyword" placeholder="请输入推荐人关键词" @search="searchReference" @clear="clearReference" @custom="searchReference"></u-search>
				<scroll-view scroll-y="true" style="height: 700rpx;margin-bottom: 60rpx;" @scrolltolower="loadReference">
					<view class="slot-content">
						<view :class="item.check ? 'address_check_box' : 'address_box'" v-for="item in reference.list" :key="item.id" >
							<view @click="checkReference(item)">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="u-flex">
					<view class="addBtn" @click="reference.show = false">取消</view>
					<view class="bottomBtn" @click="confirmReference">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm"></Modal>
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar.vue";
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import UniAddressSelector from '@/components/UniAddressSelector.vue'
	import { userInfo, getConfigInfo } from '@/network/api.js'
	import env from '@/network/env.js'
	import { teaPresidentEcho, teaCreateOrder, teaOrderSn, presidentList, teaCenterApply  } from '@/network/tea.js'
	import { ossUpload } from '@/utils/jason-alioss-upload/oss.js'
	import { hasEmptyValue } from '@/utils/index.js'
	export default{
		components:{
			Navbar,
			Bottom,
			Modal,
			UniAddressSelector
		},
		data(){
			return{
				form:{
					name:'', 
					company:'', // 公司
					position: '', // 职位
					scale: '', // 规模
					hometown: '', // 城市
					province_id: 0,
					city_id: 0,
					id_card: '', // 身份证
					business: '', // 营业执照
				},
				// 推荐人
				reference: {
					show: false,
					keyword: '',
					list:[],
					page: 1,
					pageSize: 10,
					name: '',
					id: '',
					inviteId: '' // 青创私董邀请注册通道
				},
				// 身份证验证
				rules: {
					id_card: [{
							required: true,
							message: '请输入身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 身份证正则表达式
								const idCardRegex =
									/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[012]))(([0|1|2]\d)|3[01])\d{3}([0-9]|X|x)$/;
								return idCardRegex.test(value);
							},
							message: '身份证格式不正确',
							trigger: ['blur', 'change']
						}
					],
				},
				modal: {
					show: false,
					showCancel: true,
					confirm: '申请',
					cancel: '取消',
					content: ''
				},
				btnText: '立即提交',
				isClick: true,
				addressShow: false,
				action: `${env.baseUrl}/api/uploadOssImage`,
				userId: uni.getStorageSync("user_id")
			}
		},
		onShow(){
			this.onGetUserInfo()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			async onGetUserInfo(){
				const userRes = await userInfo({user_id: this.userId})
				this.userData = userRes.data
				this.form.name = this.userData.name
				this.form.company = this.userData.company
				this.form.position = this.userData.position
			},
			onGetPresidentList(){
				const params = {
					is_center: 1,
					keyword: this.reference.keyword,
					page: this.reference.page,
					limit: this.reference.pageSize
				}
				presidentList(params).then(res=>{
					res.data.list.map(item=>{
						const params = {
							...item,
							check: false
						}
						this.reference.list.push(params)
					})
				})
			},
			openReference(){
				if(this.reference.inviteId){
					return
				}else{
					this.reference.show = true
				}
			},
			searchReference(){
				this.reference.list = []
				this.reference.page = 1
				if(this.reference.keyword){
					this.onGetPresidentList()
				}else{
					uni.showToast({
						title: "请输入推荐人关键词",
						icon: "none"
					})
				}
			},
			clearReference(){
				this.reference.keyword = ''
				this.reference.list.length = 0
				this.reference.page = 1
				this.onGetPresidentList()
			},
			loadReference(){
				this.reference.page++
				this.onGetPresidentList()
			},
			checkReference(val){
				this.reference.list.map(item=>item.check =false)
				val.check = true
			},
			confirmReference(){
				let checkObj = this.reference.list.find(item=>item.check == true)
				this.reference.name = checkObj.name
				this.reference.id = checkObj.id
				this.reference.show = false
			},
			onSwitchAddress(){
				uni.navigateTo({
					url:"/teaBureau/teaAddressList/teaAddressList?type=1"
				})
			},
			onEditAddress(id){
				uni.navigateTo({
					url: "/teaBureau/teaAddressForm/teaAddressForm?id=" + id
				})
			},
			onOpenHomeTown() {
				this.addressShow = true
			},
			onCloseHomeTown() {
				this.addressShow = false;
			},
			onConfirmArea(val) {
				this.addressShow = false;
				this.form.province_id =val.provinceObj.areaCode
				this.form.city_id = val.cityObj.areaCode
				this.form.hometown = val.fullAreaText
			},
			onUploadFile(){
				let _this = this
				wx.chooseMessageFile({
					type: 'file',
					count: 1,
					success: function(res) {
						const tempFilePaths = res.tempFiles
						let isSize = tempFilePaths.some(tempItem => {
							if (tempItem.size > 20971520) return tempItem
						})
						if (isSize == true) {
							uni.showToast({
								icon: "none",
								duration: 2000,
								title: "请上传小于20m的文件",
							})
						}  else {
							uni.showLoading({
								title: '文件上传中',
								mask: true
							});
							tempFilePaths.map((fileItem, fileIndex) => {
								ossUpload(fileItem.path, fileItem.name, 'images/common/','',`${fileItem.name.substring(fileItem.name.indexOf('.'))}`).then(ossRes => {
									if (ossRes.success == true) {
										_this.form.business = ossRes.data
										uni.hideLoading()
									} else {
										uni.hideLoading()
										uni.showToast({
											icon: "none",
											duration: 2000,
											title: "上传失败"
										})
									}
								})
							})
						}
					}
				})
			},
			onDeleteUploadFile(){
				this.form.business = ''
			},
			confirm(){
				this.$refs.uForm.validate(async valid => {
					if(valid){
						if(hasEmptyValue(this.form)){
							this.isClick = false
							const _this = this
							const params = {
								...this.form,
								reference_id: this.reference.id,
								user_id: uni.getStorageSync("user_id")
							}
							const res = await teaCenterApply(params)
							this.modal.content = '提交成功，请等待工作人员审核'
							this.modal.confirm = '确定'
							this.modal.show = true
						}else{
							uni.showToast({
								title: "必填项不能为空",
								icon: "none"
							})
							this.isClick = true
						}
					}
				})
				
			},
			modalConfirm(){
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkAddressBox{
		height: 1000rpx;
		padding: 30rpx 30rpx 50rpx 30rpx;
		
		.address_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: #FAFAFA;
		}
		
		.address_check_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fb6316;
			color:#fff;
		}
		
		.addBtn{
			flex:1;
			height: 80rpx;
			background: #fff;
			color: #000;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-right: 40rpx;
			border: 1rpx solid #ccc;
		}
		
		.bottomBtn{
			flex:1;
			height: 80rpx;
			background: #fb6316;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
		}
	}
</style>